<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link href="/css/" rel="stylesheet">
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .odd{
    background-color: aquamarine;
  }
  table{
    text-align:center;
    margin:auto;
  }
  .title{
    text-align: center;
    font-size: 3rem;
  }
.s{
  position: relative;
}

  .auto{
    margin: auto;
    text-align: center;
  }
  .aa{
    text-align: center;
    margin:auto;
  }

</style>
<body>
  <div class="title"><span>空气质量检测信息库</span></div>
  <form action="/quality/query" id="form1">
    <div class="auto"><span>按区域查询</span>
      <select name="districtId" id="districtId">
        <option value="" >不限</option>
        <c:forEach items="${districtInfo}" var="t">
          <option value="${t.id}"<c:if test="${t.id==districtId}">selected</c:if>>${t.name}</option>
        </c:forEach>

      </select>
      <input type="submit" id="sub" value="查找">
      <a href="/add.jsp">添加空气质量信息</a>
    </div>
    <%--<div class="aa">${msg}</div>--%>

    <table border="1">
      <tr>
        <td width="10%">序号</td>
        <td width="10%">区域</td>
        <td width="20%">监测时间</td>
        <td width="10%">PM10数据</td>
        <td width="10%">PM2.5数据</td>
        <td width="20%">监测站</td>
      </tr>

      <tr>
        <td colspan="6" bgcolor="#b8860b">
          <span class="aa" style="<c:if test="${pageAssistant.items.size() != 0}">display:none</c:if>  ">${msg}</span>
        </td>
      </tr>



        <c:forEach items="${pageAssistant.items}" var="t" varStatus="i">
          <tr class="${i.index%2==0?'odd':''}">
            <td>${i.count}</td>
            <td>${t.district.name}</td>
            <td><fmt:formatDate value="${t.monitorTime}" pattern="yyyy-MM-dd"></fmt:formatDate></td>
            <td>${t.pm10}</td>
            <td>${t.pm25}</td>
            <td>${t.monitoringStation}</td>
          </tr>
        </c:forEach>

    </table>
  </form>
  <div class="auto page-bar">
    <%-- <a <c:if test="${paUser.currPage != 1 }">href="/market/user/query?currPage=1&pageSize=${paUser.pageSize }"</c:if>>首页</a>
    <a <c:if test="${paUser.currPage != 1 }">href="/market/user/query?currPage=${paUser.currPage-1 }&pageSize=${paUser.pageSize }"</c:if>>上一页</a>
    <a <c:if test="${paUser.currPage != paUser.totalPage }">href="/market/user/query?currPage=${paUser.currPage+1 }&pageSize=${paUser.pageSize }"</c:if>>下一页</a>
    <a <c:if test="${paUser.currPage != paUser.totalPage }">href="/market/user/query?currPage=${paUser.totalPage }&pageSize=${paUser.pageSize }"</c:if>>尾页</a> --%>
    <a <c:if test="${pageAssistant.currPage != 1 }">href="javascript:void(0)"</c:if>>首页</a>
    <a <c:if test="${pageAssistant.currPage != 1 }">href="javascript:void(0)"</c:if>>上一页</a>
    <a <c:if test="${pageAssistant.currPage != pageAssistant.totalPage }">href="javascript:void(0)"</c:if>>下一页</a>
    <a <c:if test="${pageAssistant.currPage != pageAssistant.totalPage }">href="javascript:void(0)"</c:if>>尾页</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    跳转到<select name="currPage">
    <c:forEach begin="1" end="${pageAssistant.totalPage }" var="n">
      <option value="${n }"
              <c:if test="${pageAssistant.currPage == n }">selected</c:if>
      >第${n }页</option>
    </c:forEach>
  </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    每页<select name="pageSize">
    <c:forEach begin="5" end="20" step="5" var="n">
      <option value="${n }"
              <c:if test="${pageAssistant.pageSize == n }">selected</c:if>
      >${n }</option>
    </c:forEach>
  </select>条
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span> 第${pageAssistant.currPage }页/共${pageAssistant.totalPage }页 </span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span> 共${pageAssistant.count }条 </span>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span> 当前第${(pageAssistant.currPage-1)*pageAssistant.pageSize+1 }条 ~
			       第${pageAssistant.currPage*pageAssistant.pageSize > pageAssistant.count ? pageAssistant.count : pageAssistant.currPage*pageAssistant.pageSize }条 </span>
  </div>
</body>
<script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/js/ajaxJump.js" type="text/javascript"></script>
<script type="text/javascript">
  $("select[name='currPage']").bind("change", function() {
    var currPage = $("select[name='currPage'] option:selected").val();
    location = "/quality/query?currPage="+currPage
    +"&pageSize=${pageAssistant.pageSize }&"+$("#form1").serialize();
    <%--toJump("/product/query",--%>
            <%--"currPage="+currPage+"&pageSize=${pageAssistant.pageSize }&"+$("#form1").serialize());--%>
  })
  $(":button[value='GO']").bind("click", function() {
    var currPage = $(":text[name='currPage']").val();

    /* 验证 */
    if(isNaN(currPage)){
      $(":text[name='currPage']").val("${pageAssistant.currPage}");
      return;
    }
    if(currPage.indexOf(".") != -1){
      $(":text[name='currPage']").val("${pageAssistant.currPage}");
      return;
    }
    var total = parseInt("${pageAssistant.totalPage}");
    currPage = parseInt(currPage);
    if(currPage < 1 || currPage > total){
      $(":text[name='currPage']").val("${pageAssistant.currPage}");
      return;
    }
    if(currPage == "${pageAssistant.currPage}") return;

    location = "/quality/query?currPage=" + currPage
    +"&pageSize=${pageAssistant.pageSize }&"+$("#form1").serialize();
    <%--toJump("/product/query",--%>
            <%--"currPage="+currPage+"&pageSize=${pageAssistant.pageSize }&"+$("#form1").serialize());--%>
  })

  $("select[name='pageSize']").bind("change", function() {
    var pageSize = $("select[name='pageSize'] option:selected").val();
    location = "/quality/query?currPage=${pageAssistant.currPage}&pageSize="+pageSize
    +"&"+ $("#form1").serialize();
    <%--toJump("/product/query",--%>
            <%--"currPage=${pageAssistant.currPage}&pageSize="+pageSize+"&"+$("#form1").serialize());--%>
  })

  /* 翻页超链接的事件绑定 */

  if("${pageAssistant.currPage != 1}" == "true"){
    $(".page-bar a:eq(0)").bind("click", function() {
      newPage(1);
    })
    $(".page-bar a:eq(1)").bind("click", function() {
      newPage("${pageAssistant.currPage-1}");
    })
  }
  if("${pageAssistant.currPage != pageAssistant.totalPage}" == "true"){
    $(".page-bar a:eq(2)").bind("click", function() {
      newPage("${pageAssistant.currPage+1}");
    })
    $(".page-bar a:eq(3)").bind("click", function() {
      newPage("${pageAssistant.totalPage}");
    })
  }

  function newPage(currPage) {
    location = "/quality/query?currPage="+currPage+"&pageSize=${pageAssistant.pageSize}&"
    + $("#form1").serialize();
    <%--toJump("/product/query",--%>
            <%--"currPage="+currPage+"&pageSize=${pageAssistant.pageSize}&"+$("#form1").serialize());--%>
  }


  // $("#form1 :button").bind("click", function() {
  //   toJump("/product/query", $("#form1").serialize());
  // });
</script>
</html>